<template>
  <!--交付记录/发货明细视图-->
  <div style="background-color: #E9EEF3;">
    <el-row>
      <el-col :span="18" :offset="3" style="color: #333333;margin-bottom: 20px;margin-top: 20px;">
        <el-row style="background:#ffffff;padding:0 20px">
          <el-col :span="24">
            <div class="dialog__header">
              <span class="dialog__title">交付记录</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="background:#ffffff;padding:0 20px">
          <el-form label-width="100px" :rules="rules">
            <el-row>
              <el-col :span="12">
                <el-form-item label="对应客户:" style="width: 830px">
                  <el-input></el-input>
                </el-form-item>
                <div class="form-inline">
                  <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                  <el-button size="medium" icon="el-icon-search"></el-button>
                  <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                    <el-button size="medium" icon="el-icon-s-operation"></el-button>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同订单:">
                  <el-select placeholder="未选" style="width: 730px" ></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="产品名称:" style="width: 370px">
                  <el-input style="width: 296px">
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单价:" style="width: 370px">
                  <el-input style="width: 296px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="交付数量:" style="width: 395px">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="交付日期:" style="width: 395px">
                  <el-date-picker  type="date" placeholder="选择日期" style="width: 296px"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对方接收人:" style="width: 395px">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额:" style="width: 395px">
                  <el-input :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="备注:" style="width: 395px">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单个成本:" style="width: 395px">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="6">
                <el-form-item>
                  <el-button type="primary">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,

      rules: {
        name: [
          { required: true, message: '请输入机会主题', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]},
      mulSelection: []
    }
  },
  methods: {
    open () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  .dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;

  }
  .dialog__header{
    padding: 20px 20px 40px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .cursor{
    cursor: pointer;
  }
</style>
